<template>
  <div class="page-card h-full" v-loading="loading">
    <el-form inline>
      <el-form-item>
        <el-button type="default" @click="onAddOrUpdate()">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border>
      <el-table-column label="_id" prop="_id" align="center" />
      <el-table-column label="店铺ID" prop="shopId" align="center" />
      <el-table-column label="店铺名称" prop="shopName" align="center" />
      <el-table-column label="操作" width="260" align="center">
        <template #default="scope">
          <el-button type="danger" link @click="onDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :pageable="page" :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange" />
    <AddOrUpdate ref="addOrUpdateRef" :getList="getList" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

import { getShopWhiteListApi, deleteShopWhiteListApi} from '@/api/auth';
import { useTable } from '@/hooks/useTable';
import { AddOrUpdate } from './components';

const addOrUpdateRef = ref();

const { tableData, page, loading, getList, handleCurrentChange, handleSizeChange } = useTable({
  apiFn: getShopWhiteListApi,
  params: {}
});

const onAddOrUpdate = (data?: Recordable) => {
  addOrUpdateRef.value.init(data);
};

const onDelete = (row: any) => {
  ElMessageBox.confirm('您确认要删除当前项吗？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      deleteShopWhiteListApi(row._id).then((_) => {
        ElMessage({
          type: 'success',
          message: '删除成功'
        });
        getList();
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作'
      });
    });
};
</script>

<style lang="scss" scoped></style>
